<template>
  <view class="cart-container">
    <view class="header">
      <button class="edit-btn" @click="handleEdit">编辑</button>
    </view>
    
    <view class="product-list">
      <view 
        class="product-item" 
        v-for="(product, index) in products" 
        :key="index"
      >
        <checkbox 
          :checked="product.selected" 
          @tap="handleSelect(index)" 
          color="#ff6b35"
        />
        <view class="product-image"></view>
        <view class="product-info">
          <view class="product-name">{{ product.name }}</view>
          <view class="product-price">¥ {{ product.price.toFixed(2) }}</view>
        </view>
        <view class="quantity-control">
            <button 
              class="quantity-btn" 
              @tap="handleQuantity(index, -1)"
            >-</button>
            <text class="quantity-text">{{ product.quantity }}</text>
            <button 
              class="quantity-btn" 
              @tap="handleQuantity(index, 1)"
            >+</button>
          </view>
      </view>
    </view>

    <view class="footer">
      <view class="select-all">
        <checkbox 
          :checked="isAllSelected" 
          @tap="handleSelectAll" 
          color="#ff6b35"
        />
        <text>全选</text>
      </view>
      <view class="total">
        <text>合计: </text>
        <text class="total-price">¥ {{ totalPrice }}</text>
        <button class="checkout-btn" @tap="handleCheckout">去结算</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: '产品名称', price: 121.00, quantity: 1, selected: true },
        { name: '产品名称', price: 121.00, quantity: 1, selected: false },
        { name: '产品名称', price: 121.00, quantity: 1, selected: false }
      ]
    }
  },
  
  computed: {
    isAllSelected() {
      return this.products.every(product => product.selected)
    },
    
    totalPrice() {
      return this.products
        .filter(product => product.selected)
        .reduce((total, product) => total + product.price * product.quantity, 0)
        .toFixed(2)
    }
  },
  
  methods: {
    handleEdit() {
      uni.navigateTo({
        url: '/pages/cat-del/cat-del'
      })
    },
    handleSelect(index) {
      this.products[index].selected = !this.products[index].selected
    },
    
    handleSelectAll() {
      const newState = !this.isAllSelected
      this.products.forEach(product => {
        product.selected = newState
      })
    },
    
    handleQuantity(index, change) {
      const newQuantity = this.products[index].quantity + change
      if (newQuantity >= 1) {
        this.products[index].quantity = newQuantity
      }
    },
    
    handleCheckout() {
      uni.showToast({
        title: '正在开发中...',
        icon: 'none'
      })
    }
  }
}
</script>

<style>
@import url(./cat.css);
</style>

